//1.引入模块
const path = require('path');//引入node内置模块,主要用于操作路径相关
const glob=require('glob');
//引入处理html插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
//提取CSS
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
//压缩CSS
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//清除dist目录
// let CleanWebpackPlugin=require('clean-webpack-plugin').CleanWebpackPlugin;
let { CleanWebpackPlugin } = require('clean-webpack-plugin');//简单理解  


//自动打包入口  *表示通配符 匹配所有
let entry={};
let str=glob.sync('./src/pages/*/*.js');
str.forEach(function(dir){
    let chunkName=path.basename(dir,'.js')
     entry[chunkName]=dir;
})


//自动打包页面
let html=glob.sync('./src/pages/*/*.html');
let pages=html.map(function(dir){
    let name=path.basename(dir);
    return new HtmlWebpackPlugin({
        template: dir,
        filename: name,
        chunks:[name.replace('.html','')]//所有页面都有
    })
})


//2.导出 五大核心
module.exports = {
    //五大核心
    //1.entry 入口
    entry:entry,

    //2.output 出口
    output: {
        path: path.resolve(__dirname, 'dist'),//设置输出时的文件夹名字 ,dist一般不改,可以修改
        filename: 'js/[name].js',//设置输出的文件名 可以自定义
        publicPath: './'//静态资源输出的路径
    },
    //3.loader 加载器
    module: {
        //加载器的规则 在rules中设置每一种加载器的规则 {}
        rules: [
            //处理CSS
            {
                test: /\.css$/,
                use: [
                    //'style-loader',//把解析成的样式,放入style标签中
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    
                    'css-loader'// 按CSS规则,解析成样式
                ]
            },
            //处理less
            {
                test: /\.less$/,
                use: [
                    //'style-loader',//把解析成的样式,放入style标签中
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    'css-loader',// 按CSS规则,解析成样式
                    'less-loader'//编译less为css
                ]
            },
            //css中的图像
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options:  {
                    name: '[hash:16].[ext]',//输出文件的格式 [ext]--表示文件后缀
                    limit: 10 * 1024,//设置需要打包的文件大小  小于10bk
                    esModule: false,
                    outputPath: 'img' // 输出路径
                }
            },
            //html中的图像
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            //字体图标:
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader:  'file-loader',
                options: {
                    name: '[hash:16].[ext]',
                    outputPath: 'fonts'
                }
            },
            //ES6转ES5
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/    //排除 node_modules的处理
            }
        ]
    },
    //4.plugins 插件
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ].concat(pages),
    //5.mode  模式  development: 开发模式  production: 生产模式
    mode: process.env.NODE_ENV,

    // 开发服务器
    devServer:  {
        contentBase:path.resolve(__dirname,'dist'), // 启动服务器目录
        compress:true, // 启动gzip---压缩
        port:8849,  // 端口1000以上  以下端口不要使用 80 8080 5500 3306  3000 
        open:true, // 自动打开服务
        publicPath:'/',//公用静态资源地址
        openPage:'DynamicList.html'//默认启动服务器打开的页面
    }
}